<template>
  <!-- 新增需求单 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
        >
          <el-menu-item
            index="1"
            style="font-size : 20px;font : blod;color:black">新增需求单
          </el-menu-item>
          <span class="but">
            <el-button
              :plain="true"
              icon="el-icon-edit-outline"
              @click="save()">保存</el-button>
            <el-button
              :plain="true"
              type="primary"
              icon="el-icon-document"
              @click="commit()">提交</el-button>
          </span>

          <template/>

        </el-menu>
        <span>
          <font style="font-size : 15px;margin-left:20px">基本信息</font>
        </span>
      </el-row>
      <br>
      <el-form
        :inline="true"
        :model="formLabelAlign"
        label-width="90px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="产品线：">
              <el-select
                v-model="basic.productLine"
                placeholder="请选择">
                <el-option
                  v-for="item in formLabelAlign.productLine"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="采购部门：">
              <el-select
                v-model="basic.dep"
                placeholder="请选择">
                <el-option
                  v-for="item in formLabelAlign.dep"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="仓库：">
              <el-select
                v-model="basic.warehouse"
                placeholder="请选择">
                <el-option
                  v-for="item in formLabelAlign.warehouse"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="制单人：">
              <el-input
                v-model="basic.single"
                :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="需求客户：">
              <!--              <el-input v-model="basic.auditor"/>-->
              <el-select
                v-model="basic.client"
                placeholder="请选择">
                <el-option
                  v-for="item in formLabelAlign.client"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="成色：">
              <el-select
                v-model="basic.condition"
                placeholder="请选择">
                <el-option
                  v-for="item in formLabelAlign.condition"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="制单时间：">
              <el-input
                v-model="basic.createdTime"
                :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="状态：">
              <el-select
                v-model="status"
                placeholder="请选择">
                <el-option
                  v-for="item in formLabelAlign.status"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="单号：">
              <el-input
                v-model="basic.oddNumber"
                :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
          >
            <el-menu-item
              index="1"
              style="font-size : 15px;color:black">产品信息
            </el-menu-item>
            <span class="but">
              <el-button
                type="primary"
                icon="el-icon-folder-add"
                @click="open()">添加</el-button>
            </span>

            <!-- 弹出对话框 -->

            <el-dialog
              :visible.sync="dialogFormVisible"
              :fullscreen="true"
              title="产品挑选">
              <el-col span="29">
                <el-table
                  ref="multipleTable"
                  :data="gridData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">

                  <el-table-column
                    type="selection"
                    width="55"/>
                  <el-table-column
                    prop="goodsCode"
                    label="产品编码"
                    width="200"
                    align="center"/>
                  <el-table-column
                    prop="goodsName"
                    label="产品名称"
                    width="200"
                    align="center"/>
                  <el-table-column
                    prop="supplier"
                    label="供应商"
                    width="200"
                    align="center"/>
                  <el-table-column
                    prop="gramEnd"
                    label="克重范围"
                    width="200"
                    align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.gramStart"
                        style="width: 50px;"/>
                      ~
                      <el-input
                        v-model="scope.row.gramEnd"
                        style="width: 50px;"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="weight"
                    label="重量"
                    width="150"
                    align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.weight"
                        style="width: 50px;"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="account"
                    label="数量"
                    width="150"
                    align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.amount"
                        style="width: 50px;"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="craft"
                    label="克效果工艺"
                    width="150"
                    align="center"/>
                  <el-table-column
                    prop="specification"
                    label="规格"
                    width="150"
                    align="center"/>

                </el-table>
                <!-- 分页 -->
                <el-pagination
                  :current-page="1"
                  :page-sizes="[10, 20, 30]"
                  :page-size="10"
                  :total="total"
                  style="float:right"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"/>
                <!--                <div-->
                <!--                  slot="footer"-->
                <!--                  class="dialog-footer">-->
                <!--                  <el-button @click="dialogFormVisible = false">取 消</el-button>-->
                <!--                  <el-button-->
                <!--                    type="primary"-->
                <!--                    @click="confirm()">确 定-->
                <!--                  </el-button>-->
                <!--                </div>-->
                <div>
                  <el-button
                    type="warning"
                    @click="dialogFormVisible = false">取 消
                  </el-button>
                  <el-button
                    type="primary"
                    @click="confirm()">确定
                  </el-button>
                </div>
              </el-col>
            </el-dialog>

          </el-menu>
        </el-row>

      </el-form>
    </div>

    <div>

      <!-- 产品信息表格 -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="goodsCode"
          label="产品编码"
          width="200"
          align="center"/>
        <el-table-column
          prop="goodsName"
          label="产品名称"
          width="200"
          align="center"/>
        <el-table-column
          prop="supplier"
          label="供应商"
          width="200"
          align="center"/>
        <el-table-column
          label="克重范围"
          width="200"
          align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.gramStart"
              style="width: 50px;"/>
            ~
            <el-input
              v-model="scope.row.gramEnd"
              style="width: 50px;"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          width="100"
          align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.weight"
              style="width: 50px;"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="数量"
          width="100"
          align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.amount"
              style="width: 50px;"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="craft"
          label="克效果工艺"
          width="100"
          align="center"/>
        <el-table-column
          prop="specification"
          label="规格"
          width="100"
          align="center"/>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click.native.prevent="deleteRow(scope.$index, tableData)"/>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="1"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        :total="80"
        style="float:right"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import needgoods from "@/api/needGoods/needGood";
import needManager from '@/api/needManager/need'

export default {
  data() {
    return {
      value: '',
      // 状态中间转换变量
      status: '',
      // 基础信息对象
      basic: {
        // 产品线
        productLine: '',
        // 品类
        //category: '',
        // 仓库
        warehouse: '',
        // 制单人
        single: '张三',
        // 需求客户
        client: '',
        // 成色
        condition: '',
        // 制单时间
        createdTime: this.getTime(),
        // 单号
        oddNumber: this.createOrder(),
        // 状态
        status: ''
      },
      // 商品信息对象
      goodsInfo: {},
      requisitionForm: {
        basicInfo: {},
        goodsInfo: {}
      },
      // 基础信息参数(展示用)
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
        // 制单人and审核人
        // credits: '猪猪侠',
        // 制单时间
        createdTime: this.getTime(),
        // 单号
        oddNumber: this.createOrder(),
        // 流水线
        productLine: {},
        // 采购部门
        dep: [
          {
            label: '精品柜A'
          },
          {
            label: '精品柜B'
          },
          {
            label: '精品柜C'
          },
          {
            label: '精品柜D'
          },
          {
            label: '精品柜E'
          },
          {
            label: '精品柜F'
          }
        ],
        // 仓库
        warehouse: [
          {
            label: '成都1号仓'
          },
          {
            label: '成都2号仓'
          },
          {
            label: '成都3号仓'
          },
          {
            label: '成都4号仓'
          }
        ],

        client: [
          {
            name: '张三',
          },
          {
            name: '李四'
          }
        ],
        // 成色
        condition: {},
        // 状态
        status: [
          {
            label: '草稿'
          },
          {
            label: '定稿'
          }
        ],
        // 采购部门
        auditor: ''
      },
      // 产品信息展示
      tableData: [],
      // 添加商品信息
      dialogTableVisible: false,
      dialogFormVisible: false,
      gridData: [],
      multipleSelection: [],
      // 分页
      pageNum: 1,
      pageSize: 10,
      total: null
    }
  },
  created() {
    // 用户信息
    // this.basic.prepared = this.$store.state.grades.account
    this.getlist()
  },
  // 方法区
  methods: {
    getlist() {
      needManager.all().then(result => {
        this.formLabelAlign.productLine = result.data.assemblyLine
        console.log(this.formLabelAlign.productLine)
        this.formLabelAlign.condition = result.data.condition
      })
    },
    // 分页
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.open()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.open()
    },

    // 获取当前制表时间
    getTime() {
      var date1 = new Date()
      var year = date1.getFullYear()
      var month = date1.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      var day = date1.getDate()
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      var hours = date1.getHours()
      if (hours >= 1 && hours <= 9) {
        hours = '0' + hours
      }
      var minutes = date1.getMinutes()
      if (minutes >= 1 && minutes <= 9) {
        minutes = '0' + minutes
      }
      var seconds = date1.getSeconds()
      if (seconds >= 1 && seconds <= 9) {
        seconds = '0' + seconds
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },

    // 生成订单号
    createOrder() {
      var date = new Date()
      var ordernum = 'RK' + date.getTime()
      // console.log(date)
      return ordernum
    },


    // a.audit == '' || 暂时不添加审计员
    // 提交获取参数
    commit() {
      var a = this.basic
      console.log('aaaaaa', a)
      if (
        a.client == '' ||  //需求客户
        a.productLine == '' || // 产品线之类的
        a.dep == '' ||  // 精品柜之类的
        a.warehouse == '' || //仓库
        a.single == '' || //制单人
        a.condition == '' || //品类
        a.createdTime == '' || //制单时间
        a.oddNumber == '' || //单号
        this.status == '' //状态
      ) {
        this.$alert('请完善所有表单信息', '需求单填写提示', {
          confirmButtonText: '确定'
        })
        //弹出提示框，请输入
        console.log(a)
        return
      } else {
        console.log(a)
        // 状态的值的转换
        if (this.status == '草稿') {
          this.$confirm('草稿只能保存，无法提交', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          return
        } else {
          // 状态码1，表示定稿

          this.basic.status = 1

          // console.log(this.basic.status)
          this.requisitionForm.basicInfo = this.basic

          this.requisitionForm.goodsInfo = this.tableData

          console.log('=============', this.requisitionForm)
          // 发送请求，将信息添加进数据库
          needManager.saveNeed(this.requisitionForm).then(result => {
            console.log(result)
            if (result.code == 200) {
              this.$message({
                message: '需求提交成功',
                type: 'success',
              })
              location.reload() //刷新对象
            }
          })
          // this.axios({
          //   method: 'post',
          //   url: this.baseUrl + 'requisitionForm/addOrder',
          //   data: this.requisitionForm
          // }).then((res) => {
          //   console.log(res)
          //   if (res.data.code == 200) {
          //     // 提示消息
          //     this.$message({
          //       message: '需求单提交成功',
          //       type: 'success'
          //     })
          //     this.$router.push({path: 'demandList'})
          //   } else {
          //     this.$message.error('需求单提交失败')
          //   }
          // })


        }
      }
    },

    // 保存草稿
    save() {
      // console.log('我进save了吗?')
      var a = this.basic
      if (
        a.productLine == '' ||
        a.category == '' ||
        a.warehouse == '' ||
        a.prepared == '' ||
        a.auditor == '' ||
        a.fineness == '' ||
        a.makingTime == '' ||
        a.oddNumber == '' ||
        this.status == ''
      ) {
        this.$alert('请完善所有表单信息', '需求单填写提示', {
          confirmButtonText: '确定'
        })
        // 弹出提示框，请输入
        return
      } else {
        // 状态的值的转换
        if (this.status == '定稿') {
          this.$confirm('定稿只能提交，无法保存', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          return
        } else {
          // 状态码2，表示草稿

          this.basic.status = 2

          // console.log(this.basic.status)
          this.requisitionForm.basicInfo = this.basic

          this.requisitionForm.goodsInfo = this.tableData
          // console.log(this.requisitionForm)
          // 发送请求，将信息添加进数据库

          this.axios({
            method: 'post',
            url: this.baseUrl + 'requisitionForm/addOrder',
            data: this.requisitionForm
          }).then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              // 提示消息
              this.$message({
                message: '需求单草稿保存成功',
                type: 'success'
              })
              this.$router.push({path: 'demandList'})
            } else {
              this.$message.error('需求单保存失败')
            }
          })
        }
      }
    },

    // 添加商品弹出框
    open() {
      this.dialogFormVisible = true
      // this.axios
      //   .get(this.baseUrl + 'goodsInfo/findAllGoodsInfo', {
      //     params: {
      //       pageNum: this.pageNum,
      //       pageSize: this.pageSize
      //     }
      //   })
      //   .then((res) => {
      //     this.gridData = res.data.data.list
      //     this.total = res.data.data.total
      //   })
      needgoods.allGoods().then(result => {
        this.gridData = result.data
        console.log(gridData)
      })
    },

    // 获取选择的产品信息
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 点击确认把数据放到产品信息里面
    confirm() {
      this.dialogFormVisible = false
      // this.$data.multipleSelection = this.tableData;
      // console.log(this.$data.multipleSelection)
      var data = this.multipleSelection
      data.forEach((element) => {
        // console.log(element);
        // 将的单个商品添加到数组中
        this.tableData.push(element)
        // console.log(this.tableData)
      })
    }

    // 删除当前行
    // deleteRow(index, rows) {
    //   rows.splice(index, 1)
    //   var goodsInfo = this.tableData
    // }
  }
}
</script>

<style scoped>
.but {
  float: right;
}
</style>
